文本样式、数值单位

我们先了解一下文本元素（比如 p 、 span 、 h1 、 a ）的常见样式

颜色

前面的学习，我们已经知道文字的颜色是用 color 指定的

color 指定了文字的颜色，其实还可以用 background-color 指定背景色

<body style="background-color:lightgray">
  <h1 style="color:red;background-color:white">白月黑羽今日信息</h1>
</body>

颜色的取值可以有如下这些

关键字值

就是直接用对应颜色的英文词汇表示颜色，前面我们都是这样用的。

比如 red、green、white、blue、black、yellow、teal、gray 等等

可以点击这里，查看所有的颜色关键字定义

Hex RGB值

这是用红绿蓝（RGB） 3色的 16进制值 组合表示的颜色，

比如

<head>
  <style> 
  
  div{
    margin:2rem;
    padding: 1rem
  }
  
  /* 可以修改RGB颜色值看看变化*/
  .one {
    background-color: #02798b;
  }
    
  </style>
</head>
<body>
  <div class="box one">#02798b</div> 
</body>

也可以加入第4个表示透明的的 16进制值， 00 表示完全透明， FF表示完全不透明

比如

  .one {
    background-color: #02798b80;
  }

rgb函数

也可以使用 rgb() 函数，参数为红绿蓝（RGB） 3色的 10进制值

比如

<head>
  <style> 
  
  div{
    margin:2rem;
    padding: 1rem
  }
  
   /* 可以修改RGB颜色值看看变化*/
  .one {
    background-color: rgb(2, 121, 139);
  }
    
  </style>
</head>
<body>
  <div class="box one">rgb(2, 121, 139)</div>    
</body>

你还可以给rgb() 函数传入第4个参数，表示透明度的alpha值。

如果为 0 表示完全透明，1表示完全不透明， 0.5 表示 50%的透明度，比如

  .one {
    background-color: rgb(2, 121, 139, .7);
  }

长度单位

文本字体的大小由 font-size 指定

比如

<p style='font-size: 16px;'>白月黑羽日活用户突破3万</p>

16px 表示文字的大小是 16个像素。

px是一种 长度单位

css中属性值是一种长度单位的，常见的还有 width 、height 等

长度单位值的表示常见的有 px 、 rem 、 em 、 vw 、 vh

px

px 是很常见的长度单位，表示像素个数，比如 16px 表示16个像素点长度。

但是对 font-size 来说，到底是高度、还是宽度、还是对角线长度是 16 个像素？

我查询的资料（参考这里），大多说是高度，但是实际上根据系统的实现，也不完全是这样。

比如

<h1 style="color:red;font-size: 1px;">白月黑羽</h1>

可见，其大小并非1个像素

所以，font-size 的px值，我们目前就看作也是一个相对大小的单位，px 前面的数字越大，字体越大。

但是，对宽度、高度，这样的css属性，px是一个精确的单位

<div style="background-color: green;width:200px;height:1px"></div>

rem

rem 是一种相对长度单位

{
  /*数字 和 rem之间不能有空格*/
  width :  1.2rem; 
  height : 2rem;
  font-size : 2rem;
}

rem 为单位的数值，相对的是 根元素 html 的字体大小。

1rem 表示和根元素字体大小一致， 1.2em 表示根元素字体大小的 1.2 倍

下面的例子中，如果你修改html的字体大小，会发现span元素字体大小会跟着变，

而修改body的字体大小，则不会跟着变

<!DOCTYPE html>
<html>
<head>
  <style>
  html{
    font-size: 10px;
  }
  body{
    font-size: 20px;
  }
  span{    
    font-size: 1rem;
  }
  </style>
</head>

<body>
  <span>
  黑羽压测1.44版发布
  </span>

</body>
</html>

同样， rem用来修饰元素的 宽度、高度 ，也是相对于 根元素 html 的字体大小。

下面的例子中，如果你修改html的字体大小，会发现 div 大小会跟着变，

而修改body、或者div自身的字体大小，则不会

<!DOCTYPE html>
<html>
<head>
  <style>
  html{
    font-size: 10px;
  }
  body{
    font-size: 20px;
  }
  div{    
    background-color: green;

    font-size: 5px;
    width:20rem; 
    height:.1rem
  }
  </style>
</head>

<body>

  <div />

</body>
</html>

em

em 也是一种相对长度单位

{
  /*数字 和 em 之间不能有空格*/
  width :  1.2em; 
  height : 2em;
  font-size : 2em;
}

em 为单位的数值，

如果用在印刷类型的属性上（比如 font-size ），相对的是其 父元素 的字体大小

1em 表示和父元素字体大小一致， 1.2em 表示父元素字体大小的 1.2 倍

下面的例子中，如果你修改 div#d2 的字体大小，会发现 span元素字体大小会跟着变，

而修改 div#d1 的字体大小，则不会

<!DOCTYPE html>
<html>
    
  <head>
    <style>
    #d1 {
      font-size: 10px;
    }
    #d2 {
      font-size: 20px;
    }
    span{    
      font-size: 1em;
    }
    </style>
  </head>
    
  <body>
    
  <div id='d1'>  
    <div id='d2'>
      <span>
      黑羽压测1.44版发布
      </span>
        
    </div>
  </div>
        
  </body>

</html>

但是，如果用在其它属性上（比如 width height），相对的是其本身的字体大小，而不是父元素的字体大小。

1em 表示和本身字体大小一致， 1.2em 表示本身字体大小的 1.2 倍

下面的例子中，如果你修改div自身的字体大小，会发现 div 宽度、高度会跟着变，

而修改body、或者html的字体大小，则不会

<!DOCTYPE html>
<html>
<head>
  <style>
  html{
    font-size: 10px;
  }
  body{
    font-size: 20px;
  }
  div{    
    background-color: green;

    font-size: 5px;
    width:20em; 
    height:.1em
  }
  </style>
</head>

<body>

  <div />

</body>
</html>

vw、vh

有时，我们会使用 vw 、 vh 这两个相对单位，分别表示相对整个浏览器网页内容的显示框 viewport 的宽度和高度

1vw 表示 viewport 的宽度 1%，

100vw 表示 viewport 的宽度 100%，也就是整个内容显示框的宽度。

同理，

1vh 就是 1% 的 viewport高度

100vh 就是 100% 的 viewport高度

比如

<!DOCTYPE html>
<html>
<head>
  <style> 
  span{    
    font-size: 5vh;
  }
  </style>
</head>
<body>
<span>
黑羽压测1.44版发布
</span>
</body>
</html>

可以发现，随着窗口高度的调整，字体大小跟着变化

一个典型的vh的使用是，设置body的高度为占满整个 viewport。

如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>白月黑羽web教学</title>

  <style>

  body {
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows:  auto 1fr auto;
    grid-template-columns: 100%;
  }

  nav {
    background: #218a8a;
    color:white;
    padding: 1rem;
  }

  main {
    background: whitesmoke;
    color: #444;
    padding: 1rem;
  }

  footer {
    background: #e0e0e0;
    padding: 1rem;
    text-align:center
  }
  </style>
</head>

<body>  
  <nav>
    导航栏
  </nav>
  <main>   
    <strong>这里是主体内容.</strong>
  </main>
  <footer>
    白月黑羽版权所有 
    <br>
    <small>2020-2022 @copy rights reserved</small>
  </footer>
</body>
</html>

缺省情况下 html 和 body的高度是由其内容决定的。

如果网页有页脚，body的内容小于viewport 的高度页脚就不会显示在viewport的最下面，显得比较难看

设置 body的高度为 100vh，就可以很好的解决这个问题

字体

类别

文本类型的元素，其字体是由 font-family 属性设定的

比如

{
  font-family: 'Courier New', monospace, Menlo, 新宋体;
}

指定的值可以由多种字体组成，中间用逗号隔开。

字体名称中如果有空格，建议用 引号 引起来。

排在前面的字体优先级最高，每个字符，浏览器都会按照字体列表的顺序依次查找，如果这个字符该字体中找不到（比如中文），就会往后面查看下一个字体。

这些字体要在本机安装才能有效。

粗细/倾斜/装饰线

font-weight

文本元素可以用 font-weight 指定文字显示粗体程度

其值可以用1-1000的数字指定，越大表示字体越粗

取值也可以是 lighter 、 normal 、 bold 、 bolder ，字体从细到粗。

大家直接点击这里看 MDN 官方的文档示例即可，非常清楚

font-style

文本元素可以用 font-style 指定文字显示是否为斜体。

如果值是 italic 表示为斜体， normal 表示正常显示不倾斜

text-decoration

text-decoration 用来设置或者取消文本的上划线、下划线
- none : 取消已经存在的任何文本装饰。
典型的用法就是取消 <a> 元素的下划线
- underline : 设置文本有下划线
- overline : 设置文本有上划线
- line-through : 设置文本有穿越线 strikethrough

text-decoration 可以指定多个值，比如：

{
  text-decoration: underline overline
}

边框

可以通过 CSS border 属性给元素设置边框

比如

<p style='border:1px solid green'>白月黑羽 自动化测试 教程</p>

这里border的值 1px solid green 分别代表了边框的线宽、样式、颜色

边框线宽

线宽的单位可以是 px em rem 等，也可以是 thin、medium、thick 这样的关键字

边框样式

样式可以是如下的值

none 不显示边框

dotted 边框显示为圆点线

dashed 边框显示为虚线

solid 边框显示为实线

double 边框显示为双实线

groove 边框线显示为雕刻效果，与 ridge 相反

ridge 边框线显示为浮雕效果，与 groove 相反

inset 边框线显示为陷入效果

outset 边框线显示为突出效果

边框颜色

指定了边框的颜色，可以是前文说明的任何取值

比如 green、red、#ccaa99、 rgb(2, 121, 139) 等

边框边角弧度

缺省情况下，边框是矩形，边角当然是直角。

可以通过 border-radius 指定边角的弧度，形成圆角边框

比如

<head>
  <style> 
  div {
    width: 400px;
    height:200px;
    margin: 1rem auto; 
    background-color: #02798b;

    border-radius: 40px;
  }
  </style>
</head>
<body>
  <div>边角弧度展示</div>
</body>

border-radius: 40px 表示四个边角各为一个圆的1/4扇形，对应圆的半径为 40个像素

如果，改为 border-radius: 50%; ，则表示四个边角各为一个椭圆的1/4，垂直、水平方向各为元素高度、宽度的50%。

四个角都是这样，就正好形成一个椭圆。如下图所示

<head>
  <style> 
  div{
    width: 400px;
    height:200px;
    margin: 1rem auto; 
    background-color: #02798b;
    border-radius: 50%;
  }
  </style>
</head>
<body>
  <div>边角弧度展示</div>
</body>

如果修饰的元素本身是正方形，就形成一个正圆形，如下

<head>
  <style> 
  div{
    width: 200px;
    height:200px;
    margin: 1rem auto; 
    background-color: #02798b;
    border-radius: 50%;
  }
  </style>
</head>
<body>
  <div>边角弧度展示</div>
</body>

文字布局

下面介绍一些和文字布局相关的CSS属性

对齐

text-align 属性指定文本内容的对齐方式。

注意，这个对齐的范围是该元素所属的包含块区（后面有详细讲解）

取值如下：

left : 左对齐文本
right : 右对齐文本
center : 居中文字

如下示例中，你可以尝试修改 text-align 的值，看看最终的显示效果

<body>
  <h3 style='text-align:center'>我们的教程有</h3>
  <div style='text-align:center'>
    <p>白月黑羽 Python     教程</p>
    <p>白月黑羽 自动化测试 教程</p>
    <p>白月黑羽 前端开发   教程</p>
  </div>
</body>

行高

line-height 属性设置文本每行之间的高，可以接受大多数长度单位，比如 px、em、rem等

通常更多的是设置一个无单位的值，作为 font-size 的倍数，比如 1.5

行与行之间拉开合适的空间，正文文本看起来更好更容易阅读。

推荐的行高大约是 1.5–2

如下示例中，你可以尝试修改 line-height 的值，

分别为 5px/10px/1em/2em/1rem/2rem/1.5/2.5，看看最终的显示效果

<body>
  <h3 style='text-align:center'>我们的教程有</h3>
  <div style='text-align:center;line-height: 2.5;'>
    <p>白月黑羽 Python     教程</p>
    <p>白月黑羽 自动化测试 教程</p>
    <p>白月黑羽 前端开发   教程</p>
  </div>
</body>

字词间距

letter-spacing 属性设置文本中 字母与字母 之间的间距。

word-spacing 属性设置文本中 单词与单词 之间的间距。

它们可以使用大多数长度单位，比如 px、em、rem 等

如下

<body>
  <h3 style='text-align:center'>我们的教程有</h3>
  <div style='text-align:center;letter-spacing: 2px;word-spacing:4px'>
    <p>白月黑羽 Python     教程</p>
    <p>白月黑羽 自动化测试 教程</p>
    <p>白月 黑羽 前端开发   教程</p>
  </div>
</body>

注意：连续的中文（没有空格）是看作同一个词的

white-space

white-space 指定了如何处理元素内部的空白和换行

normal

连续的空白符会被 合并 ，换行符会被当作空白符来处理。

文本长度到了限制宽度，会自动换行，保证不超过限制宽度。
nowrap

连续的空白符会被 合并 ，换行符会被当作空白符来处理。

文本长度到了限制宽度，不会自动换行，而是一直在一行呈现
pre

就是尽量按照html里面的文本内容呈现

连续的空白符会被 保留 。换行符也会做换行处理。

文本长度到了限制宽度，不会自动换行，而是一直在一行呈现
pre-wrap

和 pre 类似，除了：文本长度到了限制宽度，会自动换行，保证不超过限制宽度。
pre-line

和 pre-wrap 类似，除了：连续的空白符会被 合并 而不是 保留
break-spaces

与 pre-wrap 类似，除了：

任何保留的空白序列总是占用空间，包括在行尾。每个保留的空格字符后都存在换行机会，包括空格字符之间。

这样如果一行末尾有连续的空格，长度超过限制长度，会导致下面有空行

根据视频讲解，下面的html中的 white-space 换成不同的取值，看看显示效果的差异

<!DOCTYPE html>
<html>

<head>

  <style>
  body {
    width: 90%;
    margin: 0 auto;
  }

  p {
    font-family: 新宋体;
    background-color: rgb(79,185,227);
    padding: 1em;
    width: 400px;
    white-space: pre-wrap;
  }
  </style>
</head>

<body>
  <h1>white-space示例</h1>

  <p>    
  我们  不是     上大班课的学习方式                          

  我们   是      定制学习路线 + 实战练习 + 1对1 指导答疑

  学习练习过程中有任何问题， 随时找老师解答指导， 简单问题文字语音，复杂问题连线指导
  </p>
   
</body>
</html>

文本样式、 数值单位

颜色